<template >
  <view class="fuel_remit_susses_container">
    <view class="icon"></view>
    <view class="title">交易成功</view>
    <view class="time">
      下单时间{{ele.createdDate}}
    </view>
    <view class="remit_susses_main">
      <view class="remit_susses_main_tip">
        展示给加油站员查看
      </view>
      <view class="remit_susses_main_title">
        <view class="remit_price">￥<view class="value">{{ele.amt}}</view></view>
        <view class="preferential">本次为你节省￥{{(ele.discountAmt + ele.discountCouponAmt).toFixed(2)}}元</view>
      </view>
      <view class="item_list">
        <view class="item">
          <view class="title">油号/油枪</view>
          <view class="value">{{ele.oilName}}/{{ele.oilGun}}号枪</view>
        </view>
        <view class="item">
          <view class="title">加油金额</view>
          <view class="value">{{ele.receivableAmt}}</view>
        </view>
        <view class="item">
          <view class="title">立减优惠</view>
          <view class="value">{{ele.discountAmt}}</view>
        </view>
        <view class="item">
          <view class="title">油站地址</view>
          <view class="value">{{ele.stationName}}</view>
        </view>
        <view class="item">
          <view class="title">实际支付</view>
          <view class="value">{{ele.amt}}</view>
        </view>
      </view>
      <view class="btn_all_info" @click="goOfficial()">
        点击查看完整信息
      </view>
    </view>
  </view>
</template>

<script>
export default {
  head() {
    return {
      title: "一键加油",
    };
  },
  data() {
    return {
      ele: {},
      ordNo: {},
    };
  },

  onLoad(e) {
    if (e.ordNo) {
      this.ordNo= e.ordNo
      this.init(e.ordNo);
    }
  },

  created() {
    this.init();
  },

  computed: {

  },

  methods: {
    async init(e) {
      if (e) {
        const amountData = await this.$Request({
          url: "/selectOrderInfoByOrdNo",
          method: "GET",
          data: {orderNo: e}
        });
        if (amountData.retCode !== 0) {
          uni.redirectTo({
            url: `/subPack/my/my`
          })
          throw new Error(amountData.message);
        } else {
          this.ele = amountData.data || {};
        }
      }
    },
    goOfficial() {
      uni.redirectTo({
        url: `/subPack/record/_id?orderNo=${this.ordNo}`,
      })
    },
  },
};
</script>

<style lang="scss" >
  .fuel_remit_susses_container {
    box-sizing: border-box;
    min-height: 100vh;
    padding: 44rpx 30rpx;
    .icon {
      position: absolute;
      z-index: -1;
      top: 0;
      left: 0;
      background: linear-gradient(to bottom, #48b35a, #d4eedb, #fff);
      width: 100%;
      height: 100%;
    }
    .title {
      font-size: 70rpx;
      color: #fff;
    }
    .time {
      font-size: 36rpx;
      color: #fff;
      margin: 60rpx 0 40rpx;
    }
    .remit_susses_main {
      width: 100%;
      height: 700rpx;
      box-sizing: border-box;
      padding: 32rpx 60rpx;
      background-color: #fff;
      border-radius: 20rpx;
      .remit_susses_main_tip {
        width: 100%;
        text-align: center;
        color: #67bcbf;
        font-size: 36rpx;
      }
      .remit_susses_main_title {
        width: 100%;
        text-align: center;
        margin: 45rpx 0 24rpx;
        .remit_price {
          color: #333;
          font-size: 32rpx;
          display: flex;
          justify-content: center;
          align-items: center;
          .value {
            font-size: 60rpx;
            font-weight: 600;
          }
        }
        .preferential {
          font-size: 24rpx;
          color: #fd7561;
        }
      }
      .item_list {
        .item {
          display: flex;
          justify-content: space-between;
          color: #333;
          font-size: 24rpx;
          margin-bottom: 36rpx;
          .title {
            color: #333;
            font-size: 24rpx;
          }
        }
      }
      .btn_all_info {
        width: 100%;
        text-align: center;
        color: #67bcbf;
        font-size: 20rpx;
        line-height: 44rpx;
      }
    }
  }
</style>
